<template>
  <div class="chart-box">
    <div class="chart-btn">
      <a-row :gutter="16">
        <a-col @click="itemActive(item.key)" :class="{'gutter-row' : true, 'gutter-active': activeBtn === item.key}" v-for="item in itemBtn " :key="item.key">
          <div class="item-chart-txt">{{item.title}}</div>
        </a-col>
      </a-row>
    </div>
    <div class="chart-title">
      <span>总销售额</span>
      <span class="chart-num">358112</span>
      <span>元</span>
    </div>
    <div id="myChart10" :style="{ width: '100%', height: '60%' }"></div>
  </div>

</template>

<script>
import { defineComponent, toRefs,ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'BarChart',
  setup() {
    const itemBtn = reactive([
      {
        key: 'a',
        title: '法国'
      },
      {
        key: 'b',
        title: '西班牙'
      },
      {
        key: 'c',
        title: '德国'
      },
      {
        key: 'd',
        title: '韩国'
      },
      {
        key: 'e',
        title: '日本'
      },
      {
        key: 'f',
        title: '美国'
      },
      {
        key: 'g',
        title: '俄罗斯'
      },
      {
        key: 'h',
        title: '奥地利'
      },
      {
        key: 'i',
        title: '越南'
      },
      {
        key: 'j',
        title: '泰国'
      },
    ])
    const activeBtn = ref('a')
    const state = reactive({
      option: {
        grid: {
          top: '14%',
          left: '10%',
          right: '10%',
          bottom: '20%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            // name: '月份',
            data: ["长春","吉林","四平","辽源","松原","白城", "延边"],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                color: '#AFC0D5'
              }
            },
          },
        ],
        yAxis: [
          {
            name: '单位（万）',
            type: 'value',
            nameTextStyle: {
              color: '#058CFF'
            },
            axisLine: {
              show: true
            },
            splitLine: {     //网格线
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#AFC0D5'
              }
            },
          },

        ],
        series: [
          // 数据低下的圆片
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [16, 8], // 宽，高
            symbolOffset: [0, 5], // 左 上
            z: 3,
            symbol: 'diamond',
            symbolPosition: 'start',
            itemStyle: {
              color: 'rgba(4,68,109,0.1)'
            },
            data: [260,680,360,460,150,320,150]
          },
          // 数据的柱状图
          {
            name: '',
            type: 'bar',
            barWidth: 16,  // 柱条的宽度，不设时自适应。
            barGap: '-100%', // 不同系列的柱间距离
            itemStyle: {
              color: () => {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#61A0CD' },
                  { offset: 1, color: 'rgba(4,68,109,0.1)' }
                ]);
              },
            },
            data: [260,680,360,460,150,320,150]
          },
          // 数据顶部的样式
          {
            name: '',
            type: 'pictorialBar',
            symbol: 'diamond',
            symbolSize: [16, 8],
            symbolOffset: [0, -4],
            z: 3,
            itemStyle: {
              normal: {
                color:'#ADD2E3',
                label: {
                  show: false, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    fontSize: '12',
                    color: '#B0E1FF',
                  }
                }
              }
            },
            symbolPosition: 'end',
            data:  [260,680,360,460,150,320,150]
          }
        ],
      },
    })
    const initeCharts = () => {
      let myChart = echarts.init(document.getElementById('myChart10'))
      // 绘制图表
      myChart.setOption(state.option)
    }
    const itemActive = (key) => {
      activeBtn.value = key
    }
    onMounted(() => {
      initeCharts()
    })

    return {
      ...toRefs(state),
      itemBtn,
      activeBtn,
      itemActive
    }
  },
})
</script>

<style lang="scss" scoped>
.chart-box {
  width: 100%;
  height: 100%;
  .chart-btn {
    width: 100%;
    padding: 0 5%;
    .gutter-row {
      width: 20%;
      height: 40px;
      background: url("../../../assets/images/Home/defult_clickbg.png")no-repeat;
      background-size: cover;
      line-height: 50px;
      color: #fff;
      //.item-chart-txt {
      //  color: #fff;
      //}
    }
    .gutter-active {
      background: url("../../../assets/images/Home/active_click.png")no-repeat;
      background-size: cover;
      color: #79F6FF;
    }
  }
  .chart-title {
    width: 50%;
    height: 50px;
    background: url("../../../assets/images/Home/modile-top.png")no-repeat;
    background-size: 100% 100%;
    line-height: 50px;
    color: #AFC0D5;
    font-size: 14px;
    margin-left:25%;
    margin-top: 10px;
    display: flex;
    padding-left: 5%;
    span {
      display: block;
    }
    .chart-num {
      font-size: 32px;
      font-weight: 700;
      color: #43FFFD;
      padding: 0 5px 0 10px;
    }
  }
}
</style>
